<template>
    <a-drawer :title="title" :maskClosable="false" :width="1000" :visible="modelValue"
        :body-style="{ paddingBottom: '80px' }" @close="onClose">
        <a-form ref="formRef" :model="props.formdata" :rules="rules" layout="vertical">
            <a-divider orientation="left">权限</a-divider>
            <a-card style="width: 100%;">
                <a-row :gutter="16">
                    <a-col :span="8">
                        <a-form-item label="name" name="name">
                            <a-input v-model:value.trim="props.formdata.name" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="displayName" name="displayName">
                            <a-input v-model:value.trim="props.formdata.displayName" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="description" name="description">
                            <a-input v-model:value.trim="props.formdata.description" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-card>
            <a-row :gutter="16">
                <a-col :span="12">
                    <a-divider orientation="left">声明</a-divider>
                    <a-card>
                        <a-form-item>
                            <a-button @click="props.formdata.userClaims?.push({})">
                                <template #icon>
                                    <plus-outlined />
                                </template>
                            </a-button>
                        </a-form-item>
                        <template v-for="(item, index) in props.formdata.userClaims">
                            <a-input-group compact>
                                <a-form-item :name="['userClaims', index, 'type']" :rules="{
                                    required: true,
                                    message: '不能为空',
                                }">

                                    <a-input style="width:360px;" v-model:value.trim="item.type" placeholder="type" />
                                </a-form-item>
                                <a-button @click="() => { props.formdata.userClaims!.splice(index, 1) }">
                                    <template #icon>
                                        <close-outlined />
                                    </template>
                                </a-button>
                            </a-input-group>
                        </template>
                    </a-card>
                </a-col>
                <a-col :span="12">
                    <a-divider orientation="left">属性</a-divider>
                    <a-card>
                        <a-form-item>
                            <a-button @click="() => {
                                props.formdata.properties?.push({})
                            }">
                                <template #icon>
                                    <plus-outlined />
                                </template>
                            </a-button>
                        </a-form-item>
                        <template v-for="(item, index) in props.formdata.properties">
                            <a-input-group compact>
                                <a-form-item :name="['properties', index, 'key']" :rules="{
                                    required: true,
                                    message: '不能为空',
                                }">
                                    <a-input v-model:value.trim="item.key" placeholder="key" />
                                </a-form-item>
                                <a-form-item :name="['properties', index, 'value']" :rules="{
                                    required: true,
                                    message: '不能为空',
                                }">
                                    <a-input v-model:value.trim="item.value" placeholder="value" />
                                </a-form-item>
                                <a-button @click="() => { props.formdata.properties!.splice(index, 1) }">
                                    <template #icon>
                                        <close-outlined />
                                    </template>
                                </a-button>
                            </a-input-group>
                        </template>
                    </a-card>
                </a-col>
            </a-row>

        </a-form>
        <template #extra>
            <a-space>
                <a-button @click="onClose">取消</a-button>
                <a-button type="primary" @click="onSubmit" :loading="loading">提交</a-button>
            </a-space>
        </template>
    </a-drawer>
</template>
<script setup lang="ts">
import { useRequest } from "@/lib/net";
import { message } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
import type { FormInstance } from 'ant-design-vue/lib/form/Form';
import apiScope, { type ApiScopeItem } from "@/api/apiScope";
import { CloseOutlined, PlusOutlined } from '@ant-design/icons-vue';

const props = withDefaults(defineProps<{
    modelValue: boolean
    formdata: ApiScopeItem
}>(), {})

const emit = defineEmits<{
    (event: 'update:modelValue', arg1: boolean): void
    (event: 'success'): void
}>()
let title = ref("添加API权限范围")
watch(() => props.formdata.id, (a) => {
    if (a == undefined || a == 0) {
        title.value = "添加API权限范围"
    } else {
        title.value = "编辑API权限范围"
    }
})

const rules: Record<string, Rule[]> = {
    name: [{ required: true, message: '不能为空' }]
}

const formRef = ref<FormInstance>();
const onClose = () => {
    emit('update:modelValue', false)
}
const onSubmit = async () => {
    try {
        await formRef.value?.validateFields()
    } catch (error) {
        return
    }
    await run(props.formdata)
}

const { run, loading } = useRequest(apiScope.save, {
    manual: true,
    onSuccess: (data) => {
        if (data.code != 0) {
            message.error(data.message)
            return
        }
        formRef.value?.resetFields()
        message.success(data.message)
        emit('update:modelValue', false)
        emit('success')
    }
});

</script>

../../../../api/apiScope